const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const {VueLoaderPlugin}=require("vue-loader");
//抽离css
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
module.exports={
    entry: './str/index.js',
    output: {
      filename: "[name].[hash].bundle.js",//唯一出口
      path: path.resolve(__dirname, 'dist'),
      clean:true//清空dist文件
    },
    plugins: [
        //抽离html
        new HtmlWebpackPlugin({template: './str/index.html'}),
        //配置vue的plugin
        new VueLoaderPlugin(),
        //抽离css
        new MiniCssExtractPlugin({
            filename:"style.css"//指定打包后的结果
        }),
        //进度条插件
        new webpackbar(),
        //代码热更新
        new webpack.HotModuleReplacementPlugin({

        })
      ],
      //根据打包命令判断环境变量
      mode:process.env.NODE_ENV=="production"?"production":"development",
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: true
                }
              }
            ]
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          },
          {
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
            }]
          }
        ]
      }

}